<template>
  <div class="shoplist-container">
    <div class="list-content">
      <header class="category-header wrap">
        <van-icon name="arrow-left" @click="$router.go(-1)" />
        <div class="header-search">
          <van-icon class="icon" name="search" />
          <input
            type="text"
            class="search-title"
            v-model="keyword"
          />
        </div>
        <span class="search-btn" @click="onRefresh">搜索</span>
      </header>
      <Tabs :tabs="['推荐', '新品', '价格']" v-model="currentIndex" />
    </div>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="product-list-refresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :finished-text="productList.length ? '没有更多了' : '搜索想要的商品'"
          @load="onLoad"
          @offset="10"
        >
          <template v-if="productList.length">
            <div class="product-item" v-for="(item, index) in productList" :key="index" @click="productDetail(item)">
              <img :src="$filters.imgPrefix(item.goodsCoverImg)" />
              <div class="product-info">
                <p class="name">{{item.goodsName}}</p>
                <p class="subtitle">{{item.goodsIntro}}</p>
                <span class="price">￥ {{item.sellingPrice}}</span>
              </div>
            </div>
          </template>
          <ComEmpty v-else />
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script setup>
import {ref, watch, defineAsyncComponent} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {searchShop} from '@/service/shop'

const Tabs = defineAsyncComponent(() => import('@/components/Tabs'))

const route = useRoute()
const router = useRouter()

const orderBy = ref('')
const keyword = ref(route.query.keyword || '')
const searchBtn =  ref(false)
const seclectActive = ref(false)
const refreshing = ref(false)
const loading = ref(false)
const finished = ref(false)
const productList = ref([])
const list = ref([])
const totalPage = ref(0)
const currentIndex = ref(0)
const page = ref(1)

// 初次加载回调
function onLoad() {
  const refreshingVal = refreshing.value
  const pageVal = page.value
  if (refreshingVal && pageVal < totalPage.value) {
    page.value = pageVal + 1
  }
  if (refreshingVal) {
    productList.value = []
    setTimeout(() => refreshing.value = false, 1000)
  }
  initShopList()
}
// 初始化商品列表
async function initShopList() {
  const {categoryId} = route.query
  if (!categoryId && !keyword.value) {
    finished.value = true
    loading.value = false
    return
  }

  const {data, resultCode} = await searchShop({
    pageNumber: page.value,
    goodsCategoryId: categoryId,
    keyword: keyword.value,
    orderBy: orderBy.value
  })
  if (resultCode !== 200 || !data) return
  const {totalPage: tPage, list} = data
  productList.value = productList.value.concat(list)
  totalPage.value = tPage
  loading.value = false
  if (page.value >= tPage) finished.value = true
}
// 下拉刷新回调
function onRefresh() {
  refreshing.value = true
  finished.value = false
  loading.value = true
  page.value = 1
  onLoad()
}
// 去详情
function productDetail(item) {
  router.push({path: `/shopdetail/${item.goodsId}`})
}

watch(currentIndex, newVal => {
  const names = {
    0: '',
    1: 'new',
    2: 'price'
  }
  console.log(names[newVal])
  orderBy.value = names[newVal]
  onRefresh()
})
</script>

<style lang="less" scoped>
@import './shoplist.less';
</style>